<template>
	<view class="user-profile">
		<view class="user-basics-info">
			<view class="user-avatar-wrap" @tap="openPicturePickerPopup">
				<image class="user-avatar" :src="sotre.userInfo?.avatar" mode="aspectFill"></image>
			</view>
			<view class="user-fields">
				<text class="user-name">{{ sotre.userInfo?.nickName }}</text>
				<text class="user-company">{{ sotre.userInfo?.companyName }}</text>
			</view>
			<view class="" @tap="onSettingUserProfile">
				<image class="user-profile-right-icon" src="/static/common/arrow-left-circle-line.png"
					mode="aspectFill"></image>
			</view>
		</view>
		<view class="user-contact-info">
			<view class="contact-item contact-email">
				<template v-if="sotre.userInfo?.email">
					<image class="contact-item-icon" src="/static/login/email.png" mode="heightFix"></image>
					<text class="contact-item-text">{{ sotre.userInfo.email }}</text>
				</template>
			</view>
			<view class="contact-item contact-phone">
				<template v-if="sotre.userInfo?.phoneNumber">
					<image class="contact-item-icon" src="/static/login/phone.png" mode="heightFix"></image>
					<text class="contact-item-text">{{ sotre.userInfo.phoneNumber }}</text>
				</template>
			</view>
		</view>
		<picture-picker-popup :show="showPicturePickerPopup" @open="openPicturePickerPopup"
			@close="closePicturePickerPopup" @success="onPickSuccess"></picture-picker-popup>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		useAppStore
	} from "@/store/app";
	import {
		uploadAvatar
	} from '../../apis/components/file';

	const sotre = useAppStore();

	const showPicturePickerPopup = ref(false);
	const openPicturePickerPopup = () => {
		showPicturePickerPopup.value = true;
	}
	const closePicturePickerPopup = () => {
		showPicturePickerPopup.value = false;
	}
	const onPickSuccess = async (filePath) => {
		const msg = await uploadAvatar(filePath)
		await sotre.refreshUserInfo();
		uni.$u.toast(msg);
		closePicturePickerPopup();
	}

	const onSettingUserProfile = () => {
		uni.navigateTo({
			url: '/pages/profile-settings/profile-settings'
		})
	}
</script>

<style lang="scss">
	.user-profile {
		@include flex(column);
		padding: 36rpx 0 36rpx 18rpx;

		.user-basics-info,
		.user-contact-info {
			@include flex(row);
			align-items: center;
			justify-content: space-between;
		}

		.user-avatar {
			width: 124rpx;
			height: 124rpx;
			border-radius: 9999px;
			overflow: hidden;
			background-color: #eee;

			&-wrap {
				// margin-right: 15rpx
			}
		}

		.user-fields {
			@include flex(column);
			flex: 1;
			margin: 0 15rpx;
		}

		.user-name {
			font-size: 36rpx;
			font-weight: 500;
			line-height: 1;
			color: #fff;
		}

		.user-company {
			font-size: 24rpx;
			font-weight: 500;
			line-height: 36rpx;
			color: rgba(255, 255, 255, 0.6);
			margin-top: 12rpx;
		}

		&-right-icon {
			width: 48rpx;
			height: 48rpx;
		}

		.user-contact-info {
			padding-left: 3rpx;
			margin-top: 42rpx;
		}

		.contact-item {
			@include flex(row);
			align-items: center;

			&-icon {
				height: 24rpx;
				margin-right: 19rpx;
			}

			&-text {
				font-family: Alibaba PuHuiTi 3.0;
				font-size: 28rpx;
				font-weight: normal;
				line-height: 1;
				color: rgba(255, 255, 255, 0.65);
			}
		}
	}
</style>